<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
<<<<<<< HEAD
<<<<<<< HEAD
 * @LastEditors: 晋龍
 * @LastEditTime: 2022-01-10 11:05:23
=======
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-10 17:51:58
>>>>>>> 9412502b99b728a658dcbd89e9bfe2e3bf5302b5
-->
<template>
  <!--1. 容器 -->
  <div ref="left2_container" id="container" style="height: 95%"></div>
</template>

<script>
import { Column } from '@antv/g2plot';

export default{
  data(){
    return{
      dataArr:[ 
      {address:'西校门',people:5544,},
      {address:'新北门',people:2355,},
      {address:'旧北门',people:1234,}
      ]
    } 
  },

  mounted(){
    this.initChart()
  }, 

  methods: {
    initChart(){
      const column = new Column(this.$refs.left2_container,{
        data: this.dataArr,
        xField: 'address',
        yField: 'people',
        //悬浮框提示
        tooltip:{
          fields:['address','people'],
          domStyles:{
            'g2-tooltip':{
              padding:'5px',
              background:'rgba(47,6,170,0.8)',
              color: '#fff',
              fontSize:'16px',
            }
          }
        },
      //修改x轴文本
      xAxis:{
          label:{
            rotate:0,
            offset:10,
          }
      }
      })
      column.render()
    }
  },
}
</script>

<style scoped>

</style>
